之前写css样式的时候总是会用position/float来布局页面,结果导致层级混乱. 使用了css3的flex布局后就使代码简洁了许多,下面就用flex实现经典的圣杯布局.
经典的圣杯布局
1. 总体分为 头部,中部内容区,底部 3个部分
2. 中部内容区分为 左侧边栏 主体内容 右侧边栏
3. 左侧边栏和右侧边栏宽度是固定的,主体内容区域宽度自适应
首先搭建外层结构
- 使用flex-directtion改变排序方向得到上中下三部分
搭建内层结构
- 左右定宽,内容区域不给宽度(也可以设置min-width)
查看效果
总结
1. 能不用定位/浮动就不用,统一用flex.
2. flex布局的一些属性还是去看阮一峰的文章吧.
3. 写网页时别定死盒子的height,尽量使用padding + 盒子内容撑开父盒子.
4. 这里是项目源码
